<template>
    <customNavigationBar title="意见反馈" />

    <view class="content">
        <view class="title">问题描述</view>

        <view class="info">
            <textarea v-model="remarks" auto-height placeholder="请输入你对产品的建议或反馈吧，描述越详细，越有利于我们更快解决问题哦"></textarea>

            <view class="imgs">
                <view class="imgBox" v-for="(item, index) in imgList" :key="item" @click="preview(index)">
                    <image :src="item"></image>
                    <view class="close" @click="deleteImg(index)">x</view>
                </view>

                <view class="imgBox choose" v-if="imgList.length < 5" @click="chooseImgaes">
                    <image src="/static/common/icon_camera.png"></image>
                </view>
            </view>
        </view>

        <view class="submitButton" :class="canSubmit && 'active'" @click="SubmitEvent">提交反馈</view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { checkStrLengthIsNotZero } from '../../utils/utils';

const imgList = ref([]);
const remarks = ref('');

const canSubmit = computed(() => {
    return checkStrLengthIsNotZero(remarks.value);
});

const SubmitEvent = () => {};

const chooseImgaes = () => {
    uni.chooseImage({
        count: 5 - imgList.value.length, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            imgList.value = Array.from(new Set([...imgList.value, ...res.tempFilePaths]));
        }
    });
};
const preview = (i) => {
    uni.previewImage({
        current: i,
        urls: imgList.value
    });
};

const deleteImg = (i) => {
    imgList.value.splice(i, 1);
};
</script>

<style lang="scss" scoped>
.content {
    padding: 94rpx 24rpx 0;
    .title {
        font-weight: bold;
        font-size: 40rpx;
        color: #333333;
        margin-bottom: 20rpx;
    }

    .info {
        width: 100%;
        padding: 28rpx 40rpx 40rpx;
        background-color: #f2f3f5;
        min-height: 432rpx;
        border-radius: 16rpx;

        textarea {
            margin-bottom: 20rpx;
            min-height: 240rpx;
            width: 100%;
            font-size: 28rpx;
            color: #999999;
            line-height: 42rpx;
        }
        .imgs {
            display: flex;
            gap: 20rpx;

            .imgBox {
                width: 106rpx;
                height: 106rpx;
                background: #f2f3f5;
                border-radius: 16rpx;
                border: 2rpx dashed #999999;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .close {
                    position: absolute;
                    top: 0;
                    right: 0;
                    transform: translate(50%, -50%);
                    width: 30rpx;
                    height: 30rpx;
                    border-radius: 50%;
                    background-color: #ccc;
                    color: #fff;
                    text-align: center;
                    line-height: 30rpx;
                }
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16rpx;
                }
            }
            .choose image {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }

    .submitButton {
        width: 550rpx;
        height: 92rpx;
        background: #e4e4e6;
        border-radius: 16rpx;
        margin: 0 auto;
        margin-top: 222rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 92rpx;
        text-align: center;

        &.active {
            background: #2c72ff;
            color: #fff;
        }
    }
}
</style>
